<template>
<!-- v-if="banner.length"这句话不加就不会滚 -->
  <Swiper v-if="banner.length"
     ref="swiper">
    <SwiperItem v-for="(item,index) in banner" :key="index"  >
      <a :href="item.link">
        <img :src="item.image" alt :title="item.title" @load="swiperImgLoad" />
      </a>
    </SwiperItem>
  </Swiper>
</template>

<script>
import { Swiper, SwiperItem } from '@/components/common/swiper'
export default {
  data () {
    return {
      isLoad: false
    }
  },
  props: {
    banner: {
      type: Array,
      default () {
        return []
      }
    }
  },
  components: {
    Swiper,
    SwiperItem
  },
  methods: {
    stopTimer () {
      this.$refs.swiper.stopTimer()
    },
    startTimer () {
      if (this.$refs.swiper) {
        this.$refs.swiper.startTimer()
      }
    },
    // 图片加载完成调用
    swiperImgLoad () {
      // 因为我们只需要知道一次 一次加载完成就行了不需要调用四次 用不到防抖 解决办法 组件上面事件.once 或者
      if (!this.isLoad) {
        this.$emit('swiperImgLoad')
        this.isLoad = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
